<template>
    <div>
      <vab-card>
        <template #header>
          <span class="leve_title">其它出库查询</span>
        </template>
        <template #default>
          <el-form
            :ref="(el) => (searchFormRef = el)"
            :model="searchForm"
            label-width="80px"
            label-position="left"
            class="form_search"
          >
            <el-row :gutter="24">
              <el-col
                v-for="(item, i) in OtherOutSearch"
                :key="i" :xs="24" :sm="12" :md="8" :lg="6" :xl="6"
              >
                <!-- 默认项 -->
                <el-form-item
                  v-if="item.type == 'select'"
                  :label="item.label"
                  :prop="item.prop"
                >
                  <VabSelectForm 
                    :multiple="item.multiple"
                    v-if="selectOptions(item.prop)" 
                    v-model.trim="searchForm[item.prop]" 
                    :options="selectOptions(item.prop)"
                    @keyup.enter.native="onkeydown"
                    @change="(value: any) => { handleVabSelect(value, item) }"
                  />
                </el-form-item>
                <!-- autocomplete -->
                <el-form-item
                  v-if="item.type == 'autocomplete'"
                  :label="item.label"
                  :prop="item.prop"
                >
                  <VabAutoForm v-model="searchForm[item.prop]" :list="selectOptions(item.prop)"/>
                </el-form-item>
                <!-- input -->
                <el-form-item
                  v-if="item.type == 'input'"
                  :label="item.label"
                  :prop="item.prop"
                >
                  <el-input
                    clearable
                    placeholder="请输入"
                    class="width_100 height_auto"
                    v-model.trim="searchForm[item.prop]"
                    @keyup.enter.native="onkeydown"
                  />
                </el-form-item>
                <!-- time -->
                <el-form-item
                  v-if="item.type == 'time'"
                  :label="item.label"
                  :prop="item.prop"
                >
                  <el-date-picker
                    clearable
                    placeholder="请选择"
                    type="datetimerange"
                    class="width_100 height_auto"
                    :format="TimeFormat"
                    :default-time="DefaultTime"
                    v-model="searchForm[item.prop]"
                    @keyup.enter.native="onkeydown"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                <div class="flex_just_end">
                  <el-button size="small" type="primary" @click="handleSearch()">
                    查询
                  </el-button>
                  <el-button size="small" @click="resetForm(searchFormRef)">
                    重置
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </vab-card>
      <!-- 主 -->
      <vab-card shadow="always">
        <template #header>
          <span class="leve2_title">其它出库列表</span>
        </template>
        <el-table
          border
          height="200"
          style="width: 100%"
          highlight-current-row
          :data="data.dataSource"
          v-loading="data.loading"
          @current-change="handleCurrentChange"
        >
          <el-table-column label="序号" align="center" width="60">
            <template #default="scope">
              <span
                class="ellipsis"
                v-text="(data.pageNum - 1) * data.pageSize + (scope.$index + 1)"
              ></span>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, i) in data.cloums"
            :key="i"
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            :align="item.type == 'money' || item.type == 'number' ? 'right' : 'center'"
          >
            <template #default="scope">
              <!-- 自定义 -->
              <div v-if="item.type == 'custom'">
                <span class="ellipsis" >
                  <el-tag v-if="scope.row[item.prop] == 1" class="ml-2" type="success">是</el-tag>
                  <el-tag v-if="scope.row[item.prop] == 2" class="ml-2" type="warning">否</el-tag>
                  <span v-if="scope.row[item.prop] == 0" class="ml-2" type="info">--</span>
                </span>
              </div>
              <!-- 正常 -->
              <div 
                v-else
                class="ellipsis"
              >
                {{ _FieldFormat(scope.row[item.prop], item.type) }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex_just_end">
          <el-pagination
            background
            small="small"
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            layout="total, prev, pager, next,sizes, jumper"
            :page-sizes="[20, 50, 100, 200]"
            :pager-count="10"
            :total="data.count"
            @current-change="handlePageNum"
            @size-change="handlePageSize"
          />
        </div>
      </vab-card>
      <!-- 详情 -->
      <OtherOutDetail :ref="(el) => otherOutDetailRef = el"/>
    </div>
  </template>
  
<script lang="ts" setup>
defineOptions({
  name: 'InventoryOtherOutLibrary',
})
/**
 * @import
 */
import {
  OtherOutSearch,
  OtherOutCloums,
  OtherOutSearchSelect,
} from './components/tools'
import { FieldFormat, DefaultTime, TimeFormat, ExcludeEmpty } from '~/src/utils/utils'
import { ElMessage, FormInstance, dayjs } from 'element-plus'
import { getInventorySearch, getInventoryStockOut } from '~/src/api/dms/inventory';
import OtherOutDetail from './components/OtherOutDetail.vue'
/**
 * @var
 */
const otherOutDetailRef = ref<any>(null)
const searchFormRef = ref<any>(null)
const router = useRouter()
const searchForm = reactive<any>({})
const data = reactive<any>({
  dataSource: [],
  cloums: [],
  pageNum: 1,
  pageSize: 20,
  count: 0,
  search: {},
})
data.dataSource = []
data.cloums = OtherOutCloums
// 是否已经查询
const isCheck = ref<Boolean>(false)

let classTwoList = ref<any>([])
/**
 * @method
 */
const handleSearch = async (value = '') => {
  isCheck.value = true
  await _GetProductList()
  ElMessage({
    message: '查询成功',
    type: 'success',
  })
}
const resetForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  isCheck.value = true
  await formEl.resetFields()
  await _GetProductList()
  ElMessage({
    message: '重置成功',
    type: 'success',
  })
}
// 回车
const onkeydown = (value: any) => {
  isCheck.value = true
  _GetProductList()
}
// 单选
const handleCurrentChange = (row: any) => {
  otherOutDetailRef.value.requst(row.id)
}
// VabSelect change 事件
const handleVabSelect = async (value: any, row: any) => {
  if (row.isall) {
    searchForm[row.prop] = await ExcludeEmpty(value)
  }
}
// 页码
const handlePageNum = (value: any) => {
  data.pageNum = value
  _GetProductList()
}
// 页数
const handlePageSize = (value: any) => {
  data.pageSize = value
  _GetProductList()
}
// 筛选项格式化
const selectOptions = (value: string) => {
  if (JSON.stringify(data.search) == '{}') return
  return OtherOutSearchSelect(data.search, value)
}
// 字段级格式化
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
// 获取数据
const _GetProductList = async () => {
  // 重置详情
  otherOutDetailRef.value.requst('')

  data.loading = true

  let _searchForm = { ...searchForm }
  if (!isCheck.value) _searchForm = {}

  const create_time: any = _searchForm.create_time
  const out_time: any = _searchForm.out_time

  const query = {
    page: data.pageNum,
    limit: data.pageSize,
    filter: {
      owner_no: _searchForm.owner_no || '', // 仓库编码
      status: _searchForm.status || [], // 状态
      src_order_type: _searchForm.src_order_type || [], // 出库类型，全部为0
      operator_name: _searchForm.operator_name || '', // 制单人
      stockout_no: _searchForm.stockout_no || '', // 出库单号
      "trade_check_time_start": create_time ? dayjs(create_time[0]).format(TimeFormat) : '', // 创建开始时间
      "trade_check_time_end": create_time ? dayjs(create_time[1]).format(TimeFormat) : '', // 创建结束时间
      "consign_time_start": out_time ? dayjs(out_time[0]).format(TimeFormat) : '', // 发货开始时间
      "consign_time_end": out_time ? dayjs(out_time[1]).format(TimeFormat) : '', // 发货结束时间
    },
  }
  try {
    const res = await getInventoryStockOut({ ...query })
    data.dataSource = res.data.list
    data.count = res.data.count
    data.loading = false
  } catch (error) { }
}
// 其他出入库筛选项
const _GetProductSearch = async () => {
  classTwoList.value = []
  try {
    const res = await getInventorySearch()
    res.data.out_status.unshift({ id: '', name: '全部' })
    res.data.out_order_type.unshift({ id: '', name: '全部' })
    data.search = await res.data
  } catch (error) { }
}
onMounted(() => {
  _GetProductList()
  _GetProductSearch()
})
</script>
  
<style lang="scss" scoped>
@import '../../components/public.scss';
</style>
  